<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM对象的获取</title>
</head>
<body>
    <div id="outer">
        <h1>一级标题</h1>
    </div>

    <!-- 双击事件 -->
    <button type="button" ondblclick="test()">双击</button>

    <input type="text" name="username" value="admin">

    <input type="text" name="username" value="tom">
    <hr>

    <button type="button" ondblclick="test2()">双击p</button>

    <div class="c1">
        <h1>ppppppp11111</h1>
    </div>

    <div class="c1">
        <h1>ppppppp222222</h1>
    </div>

    <button type="button" onclick="test3()">统计div数量</button>

    <script>

        function test3(){
            //4. 根据标签名来返回一个标签数组
            let arr = document.getElementsByTagName("div");
            console.log(arr.length);//3
        }

        function test2(){
            //3. 根据class属性的值来获取,返回也是一个数组
            let arr = document.getElementsByClassName("c1");
            for(let i=0;i<arr.length;i++){
                console.log(arr[i].innerHTML)
            }
        }

        //关于dom操作的获取
        //1. 根据id来获取 - 返回的是一个单个对象
        function test(){
            //2. 根据标签的name属性的值来获取,因为name属性的值是允许重复的
            //返回的是一个数组
            let arr = document.getElementsByName("username");
            //获取数组的长度
            //console.log(arr.length);//2

            //2. 遍历数组
            //数组 - 数据结构 - 顺序的线性的结构
            //下标是从0开始,arr.length-1结束
            for(let i=0;i<arr.length;i++){
                //获取文本输入框中输入的值
                console.log(arr[i].value);
            }
        }
    </script>
</body>
</html>